<template>
  <m-layout>
    <mt-header slot="header" title="能力成长记录">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section>
        <m-flexbox class="header-box"  justify="space-between">
          <e-heading>最新积分变化</e-heading>
          <router-link class="blue" :to="{path:'/smartCourse/abilityDataExplain'}">
            能力值解释
          </router-link>
        </m-flexbox>
        <m-flexbox class="record-title weak" justify="space-between">
          <div class="focus">重点难度</div>
          <div>能力值变化类目</div>
          <div>日期&能力值变化</div>
        </m-flexbox>
        <m-flexbox class="grow-item small" v-for="(item, index) in abilityGrow" :key="index" justify="space-between">
          <div class="grow-item-name" @click="showNageDes(index)">
            {{item.testModeName}}
            <div class="name-des"
                 v-if="showDes && index===desIndex">
              {{item.testModeNameDesc || '暂无描述'}}
            </div>
          </div>
          <div class="grow-item-testname" v-if="item.testMethodName&&item.testScoreLevel">
            <router-link :to="{
                            path: '/smartCourse/abilityChange',
                            query: {
                              studentId: $route.query.studentId,
                              testModeId: item.testModeId,
                              testModeName: item.testModeName
                            }}">
              {{item.testMethodName}}取得{{item.testScoreLevel}}评级
            </router-link>
          </div>
          <div class="grow-item-datescore" v-if="item.testScore">
            <router-link :to="{
                            path: '/smartCourse/abilityChange',
                            query: {
                              studentId: $route.query.studentId,
                              testModeId: item.testModeId,
                              testModeName: item.testModeName
                            }}">
              <div>{{new Date(item.testDate).format()}}</div>
              <div class="blue">{{item.testAbilityScore>0?'+':''}}{{item.testAbilityScore}}分</div>
            </router-link>
          </div>
          <div v-else>无变化</div>
        </m-flexbox>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      abilityGrow: state => state.smartCourse.abilityGrow
    })
  },
  data () {
    return {
      showDes: false,
      desIndex: 0
    }
  },
  mounted () {
    this.$store.dispatch('smartCourse/getStudentLastAbilityScore', this.$route.query)
  },
  methods: {
    showNageDes (index) {
      if (this.desIndex !== index) {
        this.showDes = true
      } else {
        this.showDes = !this.showDes
      }
      this.desIndex = index
    }
  }
}
</script>
<style lang="scss" scoped>
  .header-box{
    padding-right: 0.24rem
  }
  .record-title{
    box-sizing: border-box;
    padding: 0 0.24rem;
    height: 1rem;
    .focus{
    }
  }
  .grow-item{
    height: 1.1rem;
    padding: 0 0.24rem;
    &-name{
      position: relative;
      /*width: 30%;*/
      &:after{
        content: '';
        position: absolute;
        right: -.3rem;
        top: .1rem;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 8px solid $color-sub;
      }
      .name-des {
        position: absolute;
        width: 5rem;
        top: 0.6rem;
        background: $color-white;
        padding: 0.3rem;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        z-index: 9;
        font-size: $color-sub;
        color: $color-sub;
        &:after {
          position: absolute;
          display: inline-block;
          top: -3px;
          left: 16px;
          width: 0;
          height: 0px;
          content: '';
          border-style: solid;
          border-width: 6px;
          border-color: #fff #fff transparent transparent;
          -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
          box-shadow: 2px -2px 2px #f4f4f4;
          z-index: 1;
        }
      }
    }
    &-testname{
      /*flex: 1;*/
      width: 35%
    }
    &-datescore{
      /*width: 40%;*/
      text-align: right;
    }
  }
</style>
